<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>Hover Buttons</title>

    <script type="text/javascript">
      <!-- Hide the script from old browsers
      var image1 = new Image();
      image1.src = "news_static.gif";
      var image2 = new Image();
      image2.src = "news_hover.gif";
      var image3 = new Image();
      image3.src = "products_static.gif";
      var image4 = new Image();
      image4.src = "products_hover.gif";
      var image5 = new Image();
      image5.src = "order_static.gif";
      var image6 = new Image();
      image6.src = "order_hover.gif";
      var image7 = new Image();
      image7.src = "goodies_static.gif";
      var image8 = new Image();
      image8.src = "goodies_hover.gif";
      var image9 = new Image();
      image9.src = "about_static.gif";
      var image10 = new Image();
      image10.src = "about_hover.gif";
      // Stop hiding the script -->
    </script>
  </head>

  <body>
    <h1>Hover Buttons</h1>
    <p>
      Try out these hover "buttons" to see how JavaScript makes hovering just a
      bit more fun.
    </p>
    <hr />
    <p>
      <a href="http://www.stalefishlabs.com/news.html"><img
      src="news_static.gif" alt="News" style="border-style:none"
      onmouseover="this.src = 'news_hover.gif';"
      onmouseout="this.src = 'news_static.gif';"/></a>
      <a href="http://www.stalefishlabs.com/products.html"><img
      src="products_static.gif" alt="Products" style="border-style:none"
      onmouseover="this.src = 'products_hover.gif';"
      onmouseout="this.src = 'products_static.gif';"/></a>
      <a href="http://www.stalefishlabs.com/order.html"><img
      src="order_static.gif" alt="Order" style="border-style:none"
      onmouseover="this.src = 'order_hover.gif';"
      onmouseout="this.src = 'order_static.gif';"/></a>
      <a href="http://www.stalefishlabs.com/goodies.html"><img
      src="goodies_static.gif" alt="Goodies" style="border-style:none"
      onmouseover="this.src = 'goodies_hover.gif';"
      onmouseout="this.src = 'goodies_static.gif';"/></a>
      <a href="http://www.stalefishlabs.com/about.html"><img
      src="about_static.gif" alt="About Us" style="border-style:none"
      onmouseover="this.src = 'about_hover.gif';"
      onmouseout="this.src = 'about_static.gif';"/></a>
    </p>
  </body>
</html>
